<html>

<head>



<style type="text/css">
body{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 10px 10px 10px 10px;
	padding: 0 0 0 0;
	color:#000000;
	background:#ffffff;
}

table{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

a:link, a:visited{
	font: 11px Tahoma, Arial, Helvetica, sans-serif;
	color:#0379A1;
	text-decoration: underline;
}

a:active{
	font: 11px Tahoma, Arial, Helvetica, sans-serif;
	color:#0482AD;
	text-decoration: underline;
}

a:hover{
	text-decoration: none;
}

.sample_close{
	width: 14px;
	height: 14px;
	float: right;
	margin-right: 4px;
}

table.sample_header{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 100%;
	height: 24px;
	background: #9BD7EB;
	border 0;
}

.sample_code{
    background-color: #EBEBEB;
    background: url(../);
    padding: 5px;
    margin: 20px 0 20px 0;
    border-left: 20px solid #cecece;
}



xmp, blockquote, pre{
	font-size:11px;
	margin: 5px 0 15px 0;
	padding: 5px 5px 20px 5px;
	font-family: Courier;
	background-color: #EBEBEB;
	border-left: 20px solid #cecece;
}



h1{
	font: bold 28px Times;
	color: #383838;
	width: 100%;
	height: 24px;
	text-decoration:underline;
	xbackground: #9BD7EB;
}

h2{
	font: bold 20px Arial, Tahoma;
	margin: 18px 0px 10px 0;
	color: #525252;
}

h2 a:link, h2 a:visited{
	font: bold 20px Arial, Tahoma;
	color:#0379A1;
	text-decoration: none;
}

h2 a:active{
	font: bold 20px Arial, Tahoma;
	color:#0482AD;
	text-decoration: none;
}

h2 a:hover{
	text-decoration: none;
	border-bottom: 2px dotted;
}

h3{
	font: bold 16px/16px Arial, Helvetica, sans-serif;
}

h4{
	font: bold 16px/16px Arial, Helvetica, sans-serif;
	color: #0482AD;
	padding: 20px 0 0 0;
}

h5{
	font: bold 13px/12px Arial, Helvetica, sans-serif;
	color: #0482AD;
	padding: 14px 0 4px 0;
	margin: 0;
}

h6{
	font: bold 11px/11px Arial, Helvetica, sans-serif;
	padding: 5px 0 5px 20px;
	margin: 5px;
	color: #3C3C3C;
}

.op{
	cursor:pointer;
}

div.block{
	margin-left: 0;
}

li{
	margin-top:2px;
}

span.important{
	font-weight:bold;
	color:maroon;
}

.div_drop{
	display:none;
	margin: 0px 0 10px 10px;
	padding-left: 10px;
	font-size:12px;
	border-left: 2px solid #777777;
}

.professional{
	font: bold 11px/11px Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	background: #ff800f;
	padding: 1px 1px 2px 3px;
}

.experimental{
	font: bold 11px/11px Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	background: #76b130;
	padding: 1px 1px 2px 3px;
}

.depricated{
	font: bold 11px/11px Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	background: #ff0000;
	padding: 1px 1px 2px 3px;
}

.div_method{
	margin:20px 0 20px 0;
	padding-left: 10px;
	font-weight:bold;
	cursor:pointer;
}

.div_strong_method{
	font: bold 12px/18px Tahoma, Arial, Helvetica, sans-serif;
	color: #7c7c7c;
	border-bottom: 1px dotted #cecece;\
}

.exem{
	font: bold 11px/11px Tahoma, Arial, Helvetica, sans-serif;
	color: #1da6d3;
	padding-right: 10px;
}
.tdh{
	background-color:#f4f4f4;
	padding:2px;
}

div.copyright{
	margin-top:20px;
	font-size:12px;
	font-family:arial, tahoma;
	color:gray;
}

</style>

</head>

<body>
















<div id="454240000000004001_x0" zid="1">



</div>


<div id="454240000000004001_x1" zid="2">


<table border="0" cellpadding="0" cellspacing="0" class="sample_header" zid="71">


<tbody zid="3">


<tr valign="center" zid="4">
<!-- COMPONENT ICON -->


<td align="center" width="10" zid="5">&nbsp;</td>
<!-- COMPONENT NAME --><td align="left" zid="6">


<p zid="224">


<a href="http://www.dhtmlx.com/" zid="7">DHTMLX</a> Documentation</p>


</td>


</tr>


</tbody>


</table>


</div>
<h1 id="hfiv">Replacing ExtJS Grid with dhtmlxGrid</h1><br id="svru"><a title="Download library" href="http://www.scbr.com/docs/products/dhtmlx.com/download/dhtmlxIntegration_with_extjs.zip" id="mzyd">Download library</a> <br id="xggg"><br id="zn9e">There are two main approaches to replace ExtJS grid with dhtmlxgrid:<br id="tvcw">
<ul id="hnmp">
<li id="vrqt">Replacing ExtJS grid; 
</li><li id="am39">Using dhtmlxgrid in parallel with the Ext.grid.</li></ul><br id="enk-"><b id="vs7v">Replacing ExtJS grid</b><br id="utok"><br id="sizj">a) Include all the necessary files and set path to grid images folder: <br id="vzex">
<blockquote id="ecpi">&lt;link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css" /&gt;<br id="at40">&lt;link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/ext_integration/ext_blue.css" /&gt;<br id="bz3s">&lt;script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"&gt;&lt;/script&gt;<br id="m.-4">&lt;script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"&gt;&lt;/script&gt;<br id="pq_.">&lt;script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"&gt;&lt;/script&gt;<br id="nv_j">&lt;script&gt;<br id="r4ep">&nbsp;&nbsp;&nbsp;&nbsp;dhx_image_path="../../../dhtmlxGrid/codebase/imgs/";<br id="jw.3">&lt;/script&gt;</blockquote>b) Include intervention script:<br id="o2.q">
<blockquote id="r5zc">&lt;script src="../../../../main/dhtmlxgrid/codebase/ext_integration/dhtmlxgrid_extx.js"&gt;&lt;/script&gt;<br id="k32:"></blockquote>c) Replace ExtJs GridPanel with dhtmlxgrid:<br id="l629">
<blockquote id="lr9_">&lt;script&gt;<br id="k9zj">&nbsp;&nbsp;&nbsp;&nbsp;Ext.grid.GridPanel=Ext.grid.dhxGridPanel;<br id="a8qz">&lt;/script&gt;<br id="rs-y"></blockquote>Basically this is all, now all instances of Ext.grid.GridPanel will use dhtmlxgrid as rendering engine. The component understands ExtJS style of grid configuration, and can use ExtJS DataStore as the source of data:<br id="ujk2">
<blockquote id="r4e-">&nbsp;var grid = new Ext.grid.GridPanel({<br id="b_z9">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; store: store,<br id="h8cg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; columns: [<br id="h-gf">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},<br id="zw.2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},<br id="tly1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},<br id="wt.j">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},<br id="a8st">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}<br id="lknp">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ],<br id="eevz">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stripeRows: true,<br id="m2jg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; autoExpandColumn: 'company',<br id="um-8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:350,<br id="k9nn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:600, 
<div id="ftas" style="padding: 1em 0pt; text-align: left;"><br id="u1r2"></div><br id="awta">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title:'Array Grid'<br id="p6t1">&nbsp;&nbsp;&nbsp; });<br id="h7cd"></blockquote><br id="oprp">
<div id="ftas" style="padding: 1em 0pt; text-align: center;"><img id="et0y" style="width: 659px; height: 519px;" src="images/dhhqnnw2_13nrbqtfg9.png"></div><b id="at-y">Using dhtmlxgrid in parallel with the Ext.grid</b><br id="v1ix"><br id="xshg">Just repeat the steps <span id="rbb-"><b id="wfsj">a-b</b></span> mentioned above, but instead of replacing just use dhxGridPanel where necessary:<br id="t238">
<blockquote id="bp-x">&nbsp;var grid = new Ext.grid.<b id="p-qk">dhxGridPanel</b>({<br id="q5t7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; store: store,<br id="qpmt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; columns: [<br id="lr.b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},<br id="o2y7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},<br id="kgka">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},<br id="mfp2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},<br id="j3wz">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}<br id="w.v:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ],<br id="ehlk">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stripeRows: true,<br id="vsau">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; autoExpandColumn: 'company',<br id="wggn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:350,<br id="k-xp">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:600, 
<div id="ftas" style="padding: 1em 0pt; text-align: left;"><br id="ggzl"></div><br id="rvj3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title:'Array Grid'<br id="vqps">&nbsp;&nbsp;&nbsp; });<br id="fil7"></blockquote>The following two possibilities will work for both the above mentioned approaches:<br id="apoc">
<ul id="fn67">
<li id="ne5.">Using native API of dhtmlxgrid; 
</li><li id="twe9">Including dhtmlxgrid in ExtJs layout.</li></ul><br id="eg-5"><b id="rw0o">Using native API of dhtmlxgrid</b><br id="t:t1"><br id="jmcc">You should repeat the steps <span id="uq6g"><b id="p0tq">a-b</b></span> mentioned above, and instead of ExtJS's you can use native dhtmlxgrid style of initialization:<br id="d.v.">
<blockquote id="nw9e">&nbsp;var panel=new Ext.grid.<b id="l8gr">dhxGridPanel</b>({&nbsp;&nbsp;&nbsp; //define panel<br id="e4lv">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:350,<br id="n1.g">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title:'Some Grid'<br id="jqeq">&nbsp;&nbsp;&nbsp; });<br id="umc2">&nbsp;&nbsp;&nbsp; panel.<b id="uozn">render</b>('grid-example');&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //render panel <br id="locu">&nbsp;&nbsp;&nbsp; var <b id="nuz6">grid=panel.grid</b>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //take grid instance<br id="jv__"><br id="l72r">&nbsp;&nbsp;&nbsp; grid.<b id="vj_k">setHeader</b>("Name,Index,Code");<br id="qaj1">&nbsp;&nbsp;&nbsp; grid.<b id="hdmp">setInitWidths</b>("150,150,*")<br id="sg02">&nbsp;&nbsp;&nbsp; grid.<b id="xdkn">setColAlign</b>("left,left,right")<br id="xlj_">&nbsp;&nbsp;&nbsp; grid.<b id="n6lp">setColTypes</b>("ro,ro,ro");<br id="dsp2">&nbsp;&nbsp;&nbsp; grid.<b id="bn.q">init</b>();<br id="z000">&nbsp;&nbsp;&nbsp; grid.<b id="j-h0">enableSmartRendering</b>(true);<br id="ig_1">&nbsp;&nbsp;&nbsp; // loading 50000 rows dataset<br id="o18c">&nbsp;&nbsp;&nbsp; grid.<b id="tqep">loadXML</b>("../../../../main/dhtmlxgrid/samples/!!loading_big_datasets/50000_load_grid.php?un="+Date.parse(new Date())); <br id="xnjs"></blockquote><br id="reiu"><b id="swqb">Including dhtmlxgrid in ExtJs layout</b><br id="lvj2"><br id="j1-0">If the grid is created through dhxGridPanel, there is no need in any additional steps because dhtmlxgrid will support all layout behaviors:<br id="h7g5"><br id="qla1">
<blockquote id="p:eu">&nbsp;&nbsp;&nbsp;&nbsp;new Ext.<b id="d8lv">TabPanel</b>({<br id="l3iu">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;region:'<b id="wz5.">center</b>',<br id="nfjw">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deferredRender:false,<br id="n9xv">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activeTab:0,<br id="dn81">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items:[new Ext.grid.<b id="bsvr">dhxGridPanel</b>({<br id="mr_0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;store: new Ext.data.Store({<br id="zbek">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader: new Ext.data.ArrayReader({}, [<br id="t5_o">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{name: 'company'},<br id="ub:v">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {name: 'price', type: 'float'},<br id="pnup">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {name: 'change', type: 'float'},<br id="qs9e">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {name: 'pctChange', type: 'float'},<br id="i6yp">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}<br id="rva5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]),<br id="skp2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: [<br id="rr30">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],<br id="cy4h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],<br id="qtan"></blockquote>
<div id="jth4" style="padding: 1em 0pt; text-align: center;"><img id="d0kp" style="width: 817px; height: 575px;" src="images/dhhqnnw2_14dxj6nnzr.png"></div><br id="xwcf"><br id="nsrt"><br id="l52k"><br id="c2lp"><br id="v2wa"><br id="qpig"><br id="gv1o"><br id="c72g">


<div id="454240000000004001_x68" zid="131">


<div class="copyright" zid="223">&copy; DHTMLX, 2008</div>


</div>


<div id="454240000000004001_x69" zid="132">&nbsp;</div>




</body>
</html>
